<script setup lang="ts">
import {ref, reactive, PropType, onBeforeMount} from 'vue'
import {ElMessage} from 'element-plus'
import {RoleDetailInfor, RoleFormInfor} from '@/api/baseSetting/roleManager'
import {RoleSaveInfor, saveRoleInfor} from '@/api/baseSetting/roleManager'
import dDialog from '@/components/dDialog/dDialog.vue'
import systemMenu from './components/systemMenu.vue'
import {getRoutesByAuth} from '@/util/router'

//是否显示
const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  //数据
  roleData: {
    type: Object as PropType<RoleFormInfor>,
    required: true
  }
})

const emits = defineEmits(['close'])

const title = ref('权限配置')

//信息
const fromData: RoleFormInfor = reactive(props.roleData)

const showSaveLoading = ref(false)

const onClose = () => {
  emits('close')
}

const onCancel = () => {
  onClose()
}

// 暂存前端静态路由
const menuCodeList = ref<Array<string>>([])

//角色详细信息
const roleDeatilData = ref<RoleDetailInfor>({
  menuCheckedList: []
})

const showRoleTree = ref(false)

//获取角色详细信息
const getRoleDetailInfor = () => {
  showRoleTree.value = false
  roleDeatilData.value = {
    menuCheckedList: fromData.menuJson ? JSON.parse(fromData.menuJson) : []
  }
  showRoleTree.value = true
}

//表单验证通过事件
const onSubmit = () => {
  showSaveLoading.value = true
  const {id, roleName, remark} = fromData
  const roleAllInfor: RoleSaveInfor = {
    id,
    roleName,
    remark,
    menuJson: menuCodeList.value.length
      ? JSON.stringify(menuCodeList.value)
      : null
  }
  saveRoleInfor(roleAllInfor)
    .then(() => {
      showSaveLoading.value = false
      ElMessage.success('保存成功')
      getRoutesByAuth()
      emits('close')
    })
    .catch((error) => {
      showSaveLoading.value = false
      console.warn(error)
    })
}

//选中改变数据
const onMenuChange = (
  _hasSeleteData: boolean,
  menuHasSelected: Array<string>
) => {
  menuCodeList.value = menuHasSelected
}

onBeforeMount(() => {
  getRoleDetailInfor()
})
</script>

<template>
  <d-dialog
    :title="title"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    @cancel="onCancel"
    @confirm="onSubmit"
    @close="onClose"
  >
    <div v-if="showRoleTree" class="d-tab-tree__wapper rolemanager-system-tree">
      <system-menu :role-deatil="roleDeatilData" @change="onMenuChange" />
    </div>
  </d-dialog>
</template>

<style scoped>
.rolemangaer-tabs-pane {
  background-color: var(--d-color-grey-light-5);
  overflow: auto;
}
.rolemanager-system__wapper {
  column-gap: 8px;
  row-gap: 8px;
  flex-wrap: wrap;
}
.rolemanager-system-item {
  height: 32px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: var(--d-border-radius-level-2);
  border: 1px solid var(--d-color-grey-light-3);
}
.rolemanager-system-item:hover {
  border-color: var(--el-border-color-hover);
  cursor: pointer;
}
.rolemanager-system-item-current {
  border-color: var(--theme-color) !important;
}
.rolemanager-system-item-label {
  margin-left: 7px;
}
.rolemanager-system-selete {
  pointer-events: none;
}
.rolemanager-system-tree {
  height: calc(var(--rolemangaer-tree-height) + 77px);
}
</style>
